<script setup>
import { computed, ref } from "vue";
import Panel from "../panel.vue"
import RecordTable from "./RecordTable.vue"

const props = defineProps({
    label: String,
    records: Array
})
const emit = defineEmits(['select-client'])
const shownDetail = computed(() => {
    return props.records.slice(currentPage.value * countPerPage.value, (currentPage.value + 1) * countPerPage.value);
});
const countPerPage = ref(50);
const currentPage = ref(0);

function goPrev() {
    currentPage.value = currentPage.value - 1;
}

function goNext() {
    currentPage.value = currentPage.value + 1;
}

function selectClient(client) {
    emit("select-client", client)
}
</script>

<template>
    <panel :label="label">
        <template #toolbar>
            <button variant="success" class="mr-1" @click="setStaticFilter">
                <span v-if="staticFiltered">不过滤静态访问</span>
                <span v-else>过滤静态访问</span>
            </button>
            <select name="count_per_page" id="" v-model="countPerPage" variant="success">
                <option value="10">每页10条</option>
                <option value="20">每页20条</option>
                <option value="50">每页50条</option>
            </select>
        </template>
        <record-table :records="shownDetail" :total="records.length" :current-page="currentPage"
            :count-per-page="countPerPage" @go-prev="goPrev" @go-next="goNext" @select-client="selectClient">
        </record-table>
    </panel>
</template>

<style lang="scss" scoped>
table {
    width: 100%;
    text-align: center;
    border: 1px solid #f0f0f0;

    tbody {
        tr:nth-child(2n) {
            background: #f8f8f8;
        }
    }

    tfoot,
    thead {
        background-color: #f1f1f1;
        height: 3em;
    }
}
</style>